<!--
 * @Author: early-autumn
 * @Date: 2020-05-30 17:01:01
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-17 15:36:06
-->
<template>
  <el-card class="charging-project" shadow="never">
    <div slot="header" class="charging-project__header">
      <span>项目列表</span>
      <el-radio-group v-model="type" size="mini">
        <el-radio-button label="收费"></el-radio-button>
        <el-radio-button label="免费"></el-radio-button>
      </el-radio-group>
    </div>
    <el-row v-if="!frontDesk" class="charging-project__screen" :gutter="20">
      <el-col :span="14">
        <el-input
          v-model="productItems"
          size="mini"
          placeholder="请输入产品项目"
          clearable
          @keyup.enter.native="enterHandleProductItems"
          @blur="enterHandleProductItems"
          @clear="handleQuery"
        ></el-input>
      </el-col>
      <el-col :span="10">
        <el-select
          v-model="firstProjiect"
          size="mini"
          @input="getChargingProjectList"
        >
          <el-option
            v-for="option in entityOptions"
            :key="option.label"
            :label="option.label"
            :value="option.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
    <ul
      v-loading="loading"
      class="charging-project__list"
      :style="{ height: `${frontDesk ? 520 : 480}px` }"
    >
      <li
        v-for="chargingProject in chargingProjectOptions"
        :key="chargingProject.id"
      >
        <el-button type="text" @click="handleSelect(chargingProject)">
          {{ chargingProject.productItems }}
          {{ chargingProject.price }}元
        </el-button>
      </li>
    </ul>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
import { listProject } from '@/api/erp/project'
import { entityAllOptions, entityOptions } from '@/utils/options'
import {
  frontDeskOrderEnum,
  shelvesStatusEnum,
  whetherFreeEnum,
} from '@/utils/enums'

export default {
  name: 'ChargingProject',
  props: {
    frontDesk: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      // 收费类型
      type: '收费',
      firstProjiect: '',
      productItems: '',
      chargingProjectList: [],
    }
  },
  computed: {
    ...mapState({
      clinicId: (state) => state.clinic.clinicId,
    }),
    entityOptions() {
      return [{ label: '全部', value: '' }, ...entityAllOptions]
    },
    chargingProjectOptions() {
      return this.chargingProjectList.filter((chargingProject) =>
        this.type === '免费'
          ? chargingProject.isFree === whetherFreeEnum['是']
          : chargingProject.isFree === whetherFreeEnum['不是']
      )
    },
  },
  mounted() {
    this.getChargingProjectList()
  },
  methods: {
    enterHandleProductItems() {
      this.getChargingProjectList()
    },
    handleQuery() {
      this.getChargingProjectList()
    },
    async getChargingProjectList() {
      try {
        this.loading = true
        const formData = {
          clinicId: this.clinicId,
          isUp: shelvesStatusEnum['已上架'],
          productItems: this.productItems,
        }
        if (this.frontDesk) {
          formData.isBilling = frontDeskOrderEnum['是']
        } else {
          formData.type = this.firstProjiect.split('-')[0]
          formData.firstProjiect = this.firstProjiect
        }
        const { rows } = await listProject(formData)
        this.chargingProjectList = rows
      } finally {
        this.loading = false
      }
    },
    handleSelect(e) {
      this.$emit('select', e)
    },
  },
}
</script>

<style lang="scss" scoped>
.charging-project {
  width: 100%;
  min-height: 600px;
  max-height: 1000px;

  .charging-project__header {
    margin-top: -6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .charging-project__screen {
    margin: 0 -15px 15px -15px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .charging-project__list {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-y: scroll;
  }
}
</style>
